<template>
    <div class="head">
        <div class="content wrap-v1">
            <div class="logo">
                <a href="#/">SDN-UI</a>
            </div>
            <div class="wrap-v2">
                <el-menu mode="horizontal" router>
                    <template v-for="nav in headNav">
                        <template v-if="nav.child">
                            <el-submenu :key="nav.name">
                                <template slot="title">{{ nav.name }}</template>
                                <el-menu-item :index="navChild.path" v-for="navChild in nav.child"
                                    :key="navChild.name">{{
                                            navChild.name
                                    }}</el-menu-item>
                            </el-submenu>
                        </template>
                        <el-menu-item :index="nav.path" v-else :key="nav.name">{{ nav.name }}</el-menu-item>
                    </template>
                </el-menu>
            </div>
        </div>
    </div>
</template>
<script setup>
const headNav = [
    {
        name: "开发指南",
        path: '/guide'
    },
    {
        name: "基础组件",
        path: '/sdnui'
    },
    {
        name: "高阶组件",
        path: '/sdnuiPro'
    },
    {
        name: "公共方法",
        path: '/common'
    },
    {
        name: "v1.0.0",
        path: '/guide/version'
    },
    {
        name: "更多",
        child: [
            {
                path: "/more",
                name: "选项1",
            },
            {
                path: "/more",
                name: "选项2",
            },
        ],
    }
];
</script>
<style lang="less" scoped>
.head {
    height: 80px;

    .content {
        height: 100%;
        display: flex;

        .logo {
            flex: 1;
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            background-color: #fafafa;
        }

        .el-menu {
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            background-color: transparent;
            border: 0px;
        }
    }

}
</style>